<template>
	<div>
		<!-- 新增todo -->
		<EditTodo
			placeholder="新增今日待办"
			v-model:todo-title="newTodo"
			@keyup.enter="addTodo"
			autofocus
			autocomplete="off"
		></EditTodo>
		<!-- todo列表 -->
		<ul>
			<TodoItem
            v-for="todo in filterTodos"
			:key="todo.id"
			:todo ="todo"
			v-model:edited-todo ="editedTodo"
			@remove-todo = "removeTodo"
            >
			</TodoItem>
		</ul>
		<!-- 过滤 -->
	<Filter :items="filterItems" v-model="visibility"></Filter>
	</div>
</template>

<script>
	import {  reactive, toRefs } from "vue";	
  // import TodoItem  from './TodoItem.vue';
	import TodoItem from './TodoItem.vue';
import Filter from './Filter.vue';
import { useTodos } from './useTodos.js';
import { useFilters } from './useFilters.js'



	export default {
        components: {		
            TodoItem,
            Filter
		},
		setup() {
			const todoState = reactive({
				newTodo: "",			
				editedTodo: null,
			});
			const {todos, removeTodo, addTodo} = useTodos(todoState);
			const filterState = useFilters(todos);
			return {
				...toRefs(todoState),
				...toRefs(filterState),
				removeTodo,
				addTodo,
			};
		},
	};
</script>

<style lang="scss" scoped>


</style>